<template>
    <div>
        <el-row>
            默认颜色：<el-color-picker size="small" v-model="defaultColor" />
        </el-row>
        <el-row>
            <el-col :span="4">
                <div style="background-color: rgb(0, 149, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: blue;"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(2, 160, 2);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(181, 1, 1);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: purple;"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(142, 79, 89);"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <div style="background-color: rgb(38, 255, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(42, 42, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(0, 255, 0);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: red;"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(255, 0, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(184, 111, 123);"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <div style="background-color: rgb(89, 255, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(97, 97, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(93, 255, 93);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(255, 50, 50);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(255, 50, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(187, 90, 106);"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <div style="background-color: rgb(131, 255, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(132, 132, 255);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(156, 255, 156);"></div>
            </el-col>
            <el-col :span="4">
                <div style="background-color: rgb(255, 123, 123);"></div>
            </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(255, 108, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(169, 107, 117);"></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div style="background-color: rgb(184, 255, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(181, 181, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(184, 255, 184);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(255, 171, 171);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(255, 174, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(183, 99, 113);"></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div style="background-color: rgb(220, 255, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(219, 219, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(220, 255, 220);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(255, 209, 209);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(255, 200, 255);"></div>
        </el-col>
        <el-col :span="4">
            <div style="background-color: rgb(255, 210, 240);"></div>
        </el-col>
    </el-row>
</div></template>

<script lang="ts" setup>
import { ref } from 'vue';
const defaultColor = ref('#000');
</script>

<style scoped>.el-row {
    padding: 3px;
}

.el-row .el-col div {
    width: 14px;
    height: 14px;
}

.el-row .el-col div:hover {
    width: 13px;
    height: 13px;
    box-shadow: 0 0 3px 3px rgb(255, 251, 2);
    border: 1px solid #000;
}</style>